<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05.按钮组组件</title>
	<style type="text/css">
		.btnContainer{

		}
		.btnContainer div{
			width: 50px;
			height: 50px;
			border: 1px solid #999;
			border-right: none;
			float: left;
			text-align: center;
			line-height: 50px;
		}
		.btnContainer div:first-child{
			border-radius: 5px 0 0 5px;
			margin-left: 20px;
		}
		.btnContainer div:last-child{
			border-radius: 0 5px 5px 0;
			border-right: 1px solid #999;
		}
	</style>
</head>
<body>
	<div class="btnContainer">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<div class="btnContainer">
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
	<div class="btnContainer">
		<div>8</div>
	</div>
	<div class="btnContainer">
		<div>9</div>
		<div>10</div>
		<div>11</div>
	</div>
	<div class="btnContainer">
		<div>12</div>
	</div>
	<div class="btnContainer">
		<div>13</div>
	</div>
</body>
<script type="text/javascript">
	var btnContainers=document.getElementsByClassName('btnContainer');
	function fn(){
		for(var i=0;i<btnContainers.length;i++){
			var length=btnContainers[i].children.length;
			if(length==1){
				var child=btnContainers[i].children[0];
				child.style.borderRadius='5px';
			}
		}
	}
	fn();
	
</script>
</html>